<html>
	<head>
		<script src="http://connect.facebook.net/en_US/all.js"></script> 
		<script src="jquery-1.5.1.min.js"></script>
		<script src="jquery.timeago.js" type="text/javascript"></script>
	</head>
	<body>
	
	<div id="info">
		<h1>atoyfactory brief</h1>
		<div><label>bio: </label> <p id="bio"></p></div>
		<div><label>description: </label> <p id="description"></p></div>
		<div><label>website: </label> <p id="web"></p></div>
	</div>
	
	<div id="wall">
		<h1>stories in atoyfactory</h1>
		<p id="w1"></p>
		<p id="w2"></p>
		<p id="w3"></p>
	</div>
	
	<div id="photos">
		<h1>photos</h1>
		<div id="ps"></div>
	</div>
	
	<!-- facebook part, it should be in the end of body part -->
	<div id="fb-root"></div> 
	<script>
		window.fbAsyncInit = function() {
			FB.init({appId: '197132760310348', status: true, cookie: true,
				 xfbml: true});
			
			FB.api('/170968232927521', showInfo);
			FB.api('/170968232927521/feed', showFeed);
			FB.api('/170968232927521/albums', showAlbums);
			
			// timeago lib
			jQuery("abbr.timeago").timeago();
		};
		
		function showInfo(data){
			//console.log(data);
			$("#bio").text(data.bio);
			$("#web").text(data.website);
			$("#description").text(data.description);
		}
		
		function showFeed(wall){
			//console.log(wall);
			
			// todo: auto link			
			var ids = wall.data[0].id.split("_");
			var t1 = '<a href="http://www.facebook.com/permalink.php?story_fbid='+ids[1]+'&id='+ids[0]+'">'+$.timeago(wall.data[0].updated_time) + '</a>';
			ids = wall.data[1].id.split("_");
			var t2 = '<a href="http://www.facebook.com/permalink.php?story_fbid='+ids[1]+'&id='+ids[0]+'">'+$.timeago(wall.data[1].updated_time) + '</a>';
			ids = wall.data[2].id.split("_");
			var t3 = '<a href="http://www.facebook.com/permalink.php?story_fbid='+ids[1]+'&id='+ids[0]+'">'+$.timeago(wall.data[2].updated_time) + '</a>';
			
			if (wall.data[0].message)
				$("#w1").append(wall.data[0].message+" "+t1);
			if (wall.data[1].message)
				$("#w2").append(wall.data[1].message+" "+t2);
			if (wall.data[2].message)
				$("#w3").append(wall.data[2].message+" "+t3);
		}
		
		function showPhotos(photos) {
			$.each(photos.data, function(j, photo){
				//console.log(photo);
				var t ='<a href="'+photo.link+'"><img src="'+photo.picture+'"/></a>';
				console.log(t);
				$("#ps").append(t);
			});
		};
		
		function showAlbums(album){
			//console.log(album);
			$.each(album.data, function(i, val){
				FB.api('/'+val.id+'/photos', showPhotos);
			});
		}

				
		(function() {
			var e = document.createElement('script'); e.async = true;
			e.src = document.location.protocol +
				'//connect.facebook.net/en_US/all.js';
			document.getElementById('fb-root').appendChild(e);
		}());
		
		
	</script>
	<!-- the end of facebook part -->
	
	</body>
</html>
